<template>
  <!-- 设置角色 -->
  <el-dialog title="分配角色" :visible="isShowCheck" @close="btnCancel">
    <!-- el-checkbox-group选中的是 当前用户所拥有的角色  需要绑定 当前用户拥有的角色-->
    <el-checkbox-group v-model="checkList">
      <el-tree :data="list">
        <!-- 选项 -->
        <template v-slot="{data}">
          <el-checkbox :key="data.id" :label="data.title">{{ data.title }}</el-checkbox>
        </template>
      </el-tree>
    </el-checkbox-group>
    <!-- {{ checkList }} -->
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small" @click="btnOk">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getRoleList } from '@/api/employee'
export default {
  props: {
    isShowCheck: {
      type: Boolean,
      required: true
    },
    id: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      checkList: [],
      list: [],
      defaultProps: {
        // children: 'children',
        label: 'title'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await getRoleList({ _limit: 999, _start: 0 })
      console.log('角色列表', res)
      this.list = res.data
      // const res2 = await employeeDatil(this.id)
      // console.log(res2)
      // this.checkList = res2
    },
    btnOk() {
      this.$message.success('设置成功')
      this.$emit('closeDialog')
    },
    btnCancel() {
      this.$emit('closeDialog')
    }
  }
}
</script>

<style>

</style>
